<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        /* color: blue; */
        width: 300px;
        height: 300px;
        background-color: lightcoral;
        padding: 50px;
        margin: 30px;
        /* border: 5px solid black; */

        /* border-width: 5px;
        border-style: double;
        border-color: black; */

        /* border: solid;
        border-width: 10px; */

        /* border-top: 5px red solid; */
        /* border-top-width: 5px;
        border-top-style: solid; */
        /* border-top-color: blue; */

        border-style: solid dashed dotted double;
        border-color: red blue green yellow;
        border-width: 10px 20px 30px 40px;
      }
    </style>
  </head>
  <body>
    <div>边框border属性</div>
  </body>
</html>

<!-- 
  border其实是一个复合属性

    border-width: 边框粗细
      有一个默认值是1.5px
      
    border-style: 边框类型
      solid实线 / dashed虚线 / dotted点状线 / double双实线
      默认值是none，没有线

    border-color: 边框颜色
      有默认值是和文字颜色相同


  也可以单一方向加边框
    border-top
    border-bottom
    border-left
    border-right


  border也可以写多个参数
    一个参数： 上下左右
    二个参数： 上下  左右
    三个参数： 上  左右  下
    四个参数： 上  右  下  左


  边框宽度不能加负数，有背景色
 -->
